import React from 'react';
import { Layout, Breadcrumb, Icon, Tag, Button, Table, Checkbox, Modal, Input, Select, Form, Pagination, message, TreeSelect, Tree, Tabs, DatePicker, Row, Col, Radio } from 'antd';
import { Link } from 'react-router';
import './recommended.less';
import $ from 'jquery';
import Config from '../../common/config';

const FormItem = Form.Item;
const config = new Config();
const { Header, Content, Footer, Sider } = Layout;
const TreeNode = Tree.TreeNode;
const InputGroup = Input.Group;
const TabPane = Tabs.TabPane;
const { RangePicker } = DatePicker;
const RadioGroup = Radio.Group;

class recommendedDetailForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modifyClassify: false, //选择商品弹出层
            deleteClassify: false, //删除，启用，停用，同步弹出层
        }
    }

    componentDidMount() {

    }

    //选择商品事件
    modifyClassification() {
        this.setState({
            modifyClassify: true,
        });
    }
    modifyHandleOk() {
        this.setState({
            modifyClassify: false,
        });
    }
    modifyHandleCancel() {
        this.setState({
            modifyClassify: false,
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 }, };
        const formItemLayout1 = { labelCol: { span: 4 }, wrapperCol: { span: 20 }, };
        const formItemLayout2 = { labelCol: { span: 10 }, wrapperCol: { span: 14 }, };
        const rowSelection = {
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({ selectedRowKeys });
            },
            getCheckboxProps: record => ({
                disabled: record.CustomerSourceCount > 0,
            }),
        };
        const props = {
            name: 'file',
            action: '//jsonplaceholder.typicode.com/posts/',
            headers: {
                authorization: 'authorization-text',
            },
        }
        const columns = [{
            title: '商品编号',
            dataIndex: 'spNumber',
            width: '20%',
        }, {
            title: '商品名称',
            dataIndex: 'spName',
            width: '20%',
        }, {
            title: '导航标签',
            dataIndex: 'activityNumber3',
            width: '20%',
            render: (text, record) => (
                <Input />
            ),
        }, {
            title: '排序',
            dataIndex: 'startTime',
            width: '20%',
            render: (text, record) => (
                <Input />
            ),
        }, {
            title: '操作',
            dataIndex: 'endTime',
            width: '20%',
            render: (text, record) => (
                <a href='#'>删除</a>
            ),
        }];
        const dataList = [{}];
        const columns1 = [{
            title: '勾选',
            dataIndex: 'number',
            width: '6%',
            render: text => <Checkbox onChange={(e) => this.selectProduct(text, e)}></Checkbox>
        }, {
            title: '序号',
            dataIndex: 'key',
            width: '6%',
            render: (text, record) => {
                if (record.beactive == "N") {
                    return <div className='rowchangecolor'>{text}</div>;
                } else {
                    return <div>{text}</div>;
                }
            }
        },
        {
            title: '商品ID',
            dataIndex: 'productid',
            width: '6%',
            render: (text, record) => {
                if (record.beactive == "N") {
                    return <div className='rowchangecolor'>{text}</div>;
                } else {
                    return <div>{text}</div>;
                }
            }
        }, {
            title: '商品图片',
            dataIndex: '',
            width: '12%',
            render: (text, record) => {
                return <img src={config.Filepath + record.goodlistimagename} />
            }
        }, {
            title: '商品信息',
            dataIndex: '',
            width: '30%',
            render: (text, record) => {
                if (record.beactive == "N") {
                    return <div className='rowchangecolor'>
                        <div className='price-a'>
                            <p>{record.productname}</p>
                            <p>药品名称：{record.productnumber} &nbsp;&nbsp;规格：{record.stock} &nbsp;&nbsp;通用名称：{record.costprice}&nbsp;&nbsp;品牌：{record.costprice}</p>
                        </div>
                    </div>;
                } else {
                    return <div className='price-a'>
                        <p>{record.productname}</p>
                        <p>药品名称：{record.productnumber} &nbsp;&nbsp;规格：{record.stock} &nbsp;&nbsp;通用名称：{record.costprice}&nbsp;&nbsp;品牌：{record.costprice}</p>
                    </div>;
                }
            }
        }, {
            title: '商品价格',
            dataIndex: '',
            width: '16%',
            render: (text, record) => {
                if (record.beactive == "N") {
                    return <div className='rowchangecolor'>
                        <div >
                            <p>零售价：{record.retailprice}</p>
                            <p>商城价：{record.marketprice}</p>
                        </div>
                    </div>;
                } else {
                    return <div >
                        <p>零售价：{record.retailprice}</p>
                        <p>商城价：{record.marketprice}</p>
                    </div>;
                }
            }
        }, {
            title: '标签',
            dataIndex: 'salestatus',
            width: '24%',
        }];
        const dataList1 = [{}];
        return (
            <Form>
                <div className='goods-label' style={{ minWidth: 1250 }}>
                    <div className='goods-label-cont clearfix'>
                        <div className='goods-label-cont-nav clearfix'>
                            <Breadcrumb separator=">">
                                <Breadcrumb.Item>首页</Breadcrumb.Item>
                                <Breadcrumb.Item>营销管理</Breadcrumb.Item>
                                <Breadcrumb.Item>推荐管理</Breadcrumb.Item>
                                <Breadcrumb.Item>新增</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        <div>
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="推荐名称" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName', {
                                            rules: [{ required: true, max: 30, message: '请输入推荐名称，不超过30个字' }],
                                        })(
                                            <Input placeholder="请输入推荐名称" />
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="推荐位置" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName3', {
                                            rules: [{ required: true, message: '请选择推荐位置！' }],
                                        })(
                                            <Select placeholder="请选择" >
                                                <Option value="首页底部">首页底部</Option>
                                                <Option value="购物车底部">购物车底部</Option>
                                                <Option value="个人中心">个人中心</Option>
                                            </Select>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row gutter={16}>

                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="开始时间" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName6', {
                                            rules: [{ required: true, message: '请填写开始时间！' }],
                                        })(
                                            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="结束时间" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName7', {
                                            rules: [{ required: true, message: '请填写结束时间！' }],
                                        })(
                                            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={12}>
                                    <FormItem {...formItemLayout1} label="推荐介绍" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName8', )(
                                            <Input type="textarea" rows={6} style={{ marginBottom: 30 }} />
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            {/************商品及服务************/}
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="推荐商品" hasFeedback style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName14', {
                                            rules: [{ required: true, message: '请选择推荐商品！' }],
                                        })(
                                            <Button className='member-button-aa' type='primary' onClick={this.modifyClassification.bind(this)} style={{ marginLeft: 20, width: 100, height: 30 }}>选择商品</Button>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row style={{ marginBottom: 30 }}>
                                <div className='allgoods-table clearfix'>
                                    <Table
                                        columns={columns}
                                        dataSource={dataList}
                                        pagination={false}
                                        bordered
                                    />
                                </div>
                            </Row>
                            {/************查看************/}
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="创建人" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName23')(
                                            <p>李四</p>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="创建时间" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName24')(
                                            <p>2018.3.6 14:00</p>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="启用人" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName25')(
                                            <p>system</p>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="启用线时间" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName26')(
                                            <p>2018.3.6 14:00</p>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label="停用人" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName29')(
                                            <p>system</p>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label=" 停用时间" style={{ minHeight: '70px', marginBottom: 0 }}>
                                        {getFieldDecorator('ActivityName30')(
                                            <p>2018.3.6 14:00</p>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            {/************按钮************/}
                            <Row gutter={16} >
                                <Col span={12} style={{ textAlign: 'center' }}>
                                    <Button className='member-button-aa' type='primary' style={{ marginLeft: 20, width: 100, height: 40 }}>保存</Button>
                                    <Button className='member-button-aa' type='primary' style={{ marginLeft: 40, width: 100, height: 40 }}>取消</Button>
                                </Col>
                            </Row>
                        </div>
                        <Modal title="商品列表"
                            visible={this.state.modifyClassify}
                            onOk={this.modifyHandleOk.bind(this)}
                            onCancel={this.modifyHandleCancel.bind(this)}
                            width='1200px'
                        >
                            <div className='detlettou'>
                                <div className='member-content-Search clearfix'>
                                    <div className='addetd'>
                                        <FormItem>
                                            {
                                                getFieldDecorator('txt_Inkey')(
                                                    <Input className='addetd-a-r' addonBefore="药品名/通用名/品牌/标签" placeholder="请输入" />
                                                )
                                            }
                                        </FormItem>
                                    </div>
                                    <div className='addetd addetd-bb indtner'>
                                        <InputGroup compact>
                                            <Input addonBefore="分 类" />
                                            <TreeSelect
                                                style={{ width: 210 }}
                                                value={this.state.categoryid}
                                                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                                                treeData={this.state.categoryData}
                                                placeholder="请选择"
                                                treeDefaultExpandAll
                                            />
                                        </InputGroup>
                                    </div>
                                </div>
                                <div className='member-content-Search clearfix'>
                                    <div className='addetd addetd-a indtner'>
                                        <InputGroup compact>
                                            <Input addonBefore="类 别" />
                                            <Select value={this.state.isdrugstatus} >
                                                <Option value="Y">处方药</Option>
                                                <Option value="N">非处方药</Option>
                                            </Select>
                                        </InputGroup>
                                    </div>
                                    <div className='addetd addetd-a indtner'>
                                        <InputGroup compact>
                                            <Input addonBefore="冷 藏" />
                                            <Select value={this.state.iscoldstorage} >
                                                <Option value="Y">冷藏</Option>
                                                <Option value="N">非冷藏</Option>
                                            </Select>
                                        </InputGroup>
                                    </div>
                                    <div className='addetd addetd-a indtner'>
                                        <InputGroup compact>
                                            <Input addonBefore="特 管" />
                                            <Select value={this.state.isspecialdrug} >
                                                <Option value="Y">特管药品</Option>
                                                <Option value="N">非特管药品</Option>
                                            </Select>
                                        </InputGroup>
                                    </div>
                                    <Button type="primary" className='member-button' icon="search" >搜索</Button>
                                    <Button type="primary" className='member-button' icon="reload" >重置</Button>
                                </div>
                                <div className='allgoods-table clearfix'>
                                    <Table
                                        columns={columns1}
                                        dataSource={dataList1}
                                        pagination={false}
                                        bordered
                                    />
                                </div>
                                <div className='clearfloat'></div>
                            </div>
                        </Modal>
                    </div>
                </div>
            </Form>
        )
    }
}

const RecommendedDetail = Form.create()(recommendedDetailForm);
export default RecommendedDetail;